import Upload from "ant-design-vue/es/upload";
import Button from "ant-design-vue/es/button";
import Icon from "ant-design-vue/es/icon";

import "ant-design-vue/lib/upload/style/css";
import "ant-design-vue/lib/button/style/css";
import "ant-design-vue/lib/icon/style/css";

export default {
  name: "FormUpload",
  props: {
    option: {
      type: Object,
      default() {
        return {};
      }
    },
    value: [Object, String]
  },
  model: {
    prop: "value",
    event: "updata"
  },
  data() {
    return {
      isFocus: false
    };
  },
  computed: {},
  created() {},
  methods: {
    onChange(info) {
      this.$emit("updata", info);
      this.$emit("change", info);
    },
    setFocus(is) {
      this.isFocus = is;
    }
  },
  render() {
    const that = this;
    const props = {
      props: {
        ...this.option.props
      },
      style: {
        width: this.option.width ? this.option.width : "100%"
      },
      on: {
        change: e => {
          that.onChange(e);
        },
        focus: e => {
          this.$emit("focus", e);
        },
        blur: e => {
          this.isFocus = false;
          this.$emit("blur", e);
        }
      }
    };
    if (this.value) {
      props.props.value = this.value;
    }

    let button = "";
    if (typeof this.option.button === "function") {
      button = this.option.button();
    } else {
      //图标
      let buttonIcon = "upload";
      if (this.option.buttonIcon) {
        buttonIcon = this.option.buttonIcon;
      }
      //文字
      let buttonText = "选择图片";
      if (this.option.buttonText) {
        buttonText = this.option.buttonText;
      }
      button = (
        <Button>
          <Icon type={buttonIcon} /> {buttonText}
        </Button>
      );
    }

    return <Upload {...props}>{button}</Upload>;
  }
};
